<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <meta content="featon inc." name="author">
    <link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/vendor/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="/static/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="/static/vendor/skin/ftskin.css" rel="stylesheet">
    <link href="/static/vendor/webuploader/webuploader.css" rel="stylesheet" type="text/css">
    <link href="/static/vendor/datetimepicker/jquery.datetimepicker.css" rel="stylesheet">
    <title>添加(更新)企业员工</title>
    <style>

    </style>
</head>

<body style="margin-bottom: 60px;">

<div class="ft-subpage-wrapper container-fluid">
    <form action="#" id="form1" method="post" name="form1">
        <div class="row">
            <div class="col-lg-12" id="form_table">
                <fieldset>
                    <legend id="titleText">-添加(更新)企业员工-</legend>
                    <table cellpadding="0" cellspacing="0" class="form-table form-table-border" id="">
                        <tr>
                            <th><span class="f_red">*</span>姓名</th>
                            <td colspan="3">
                                <input class="form-control" id="name" name="name" placeholder="" type="text"
                                       value="">
                                <span class="cError"></span>
                            </td>
                        </tr>
                        <tr>
                            <th><span class="f_red">*</span>性别</th>
                            <td colspan="3">
                                <label>
                                    <input checked name="sex" type="radio" value="男"> 男
                                </label>
                                <label>
                                    <input name="sex" type="radio" value="女"> 女
                                </label>
                                <span class="cError"></span>
                            </td>
                        </tr>
                        <tr>
                            <th><span class="f_red">*</span>出生年月</th>
                            <td >
                                <input class="form-control" id="birthday" type="date"/>
                                <span class="cError"></span>
                            </td>
                            <th><span class="f_red">*</span>学历</th>
                            <td >
                                <select class="form-control" id="education" name="education">
                                    <option disabled id="education_val" selected>--请选择--</option>

                                </select>
                                <span class="cError"></span>
                            </td>
                        </tr>

                        <tr>
                            <th><span class="f_red">*</span>电话</th>
                            <td colspan="3">
                                <input class="form-control" id="phone" name="phone" placeholder="联系电话" type="tel">
                                <span class="cError"></span>
                            </td>
                        </tr>
                        <tr>
                            <th><span class="f_red">*</span>身份证号</th>
                            <td colspan="3">
                                <input class="form-control" id="idcard" name="idcard" placeholder="身份证号" type="text">
                                <span class="cError"></span>
                            </td>
                        </tr>
                        <tr>
                            <th>照片</th>
                            <td>
                                <div class="file">
                                    <div id="img_box" style="position: relative;display: inline-block;">
                                        <img alt="" id="image" src="">
                                        <div id="img_btn" style="position: absolute;top:100px;left:20px; display: none">
                                            <label for="file"
                                                   style="width: 60px;text-align: center;background-color: #28219e;color: #d8b0b0;border: 1px double;border-radius: 6px;">更&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;换</label>
                                        </div>
                                    </div>
                                    <label id="uploadFile">
                                        <input id="file" name="file" style="display: none" type="file">
                                        <div style="text-align: center;height: 200px;width: 130px;border: 1px solid #a78888;border-radius: 3px">
                                            <br>
                                            <i class="glyphicon glyphicon-plus"
                                               style="font-size: 58px;color: #b9b8b6;"></i>
                                            <h3 style="color: #b9b8b6;">点击上传</h3>
                                        </div>
                                    </label>
                                </div>
                            </td>
                            <th>备注</th>
                            <td>
                                <textarea class="form-control" id="remark" name="remark" placeholder="描述一下吧..." style="width: 505px;height: 200px;margin: auto;resize: none"></textarea>
                            </td>
                        </tr>
                    </table>
                </fieldset>
                <div class="bottom-tools-box">
                    <button class="btn btn-info" id="save_but" onclick="addAndUpdateObject()" type="button"><span
                            aria-hidden="true" class="glyphicon glyphicon-floppy-disk"></span> 保存
                    </button>
                    <button class="btn btn-warning" onclick="top.tab_colseOnclick();" type="button"><span
                            aria-hidden="true" class="glyphicon glyphicon-remove-circle"></span> 取消
                    </button>
                </div>

            </div>
        </div>
    </form>
</div>
<input th:id="id" th:value="${id}" type="hidden"/>
<script src="/static/vendor/jquery/jquery-3.3.1.min.js"></script>
<script src="/static/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/vendor/validate/jquery.validate.min.js" type="text/javascript"></script>
<script src="/static/vendor/webuploader/webuploader.js" type="text/javascript"></script>
<script src="/static/vendor/skin/js/ft-ui.js"></script>
<script src="/static/vendor/skin/js/jquery.c.js"></script>
<script src="/static/vendor/skin/js/java.js"></script>
<script src="/static/vendor/sortable/sortable.js"></script>
<script src="/static/vendor/datetimepicker/jquery.datetimepicker.js"></script>
<script>
    $("form input,form select").blur(function () {
        let siblings = $(this).siblings(".cError");
        $(siblings).empty();
        if ($(this).val().trim() === "" || $(this).val() === null) {
            $(siblings).append(`
            <span style="font-size: 12px;font-weight: bold;color: red">不能为空</span>
            `)
            $(this).focus();
        }
    })
    Date.prototype.format = function (format) {
        var o = {
            "M+": this.getMonth() + 1, //month
            "d+": this.getDate(),    //day
            "h+": this.getHours(),   //hour
            "m+": this.getMinutes(), //minute
            "s+": this.getSeconds(), //second
            "q+": Math.floor((this.getMonth() + 3) / 3),  //quarter
            "S": this.getMilliseconds() //millisecond
        }
        if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
            (this.getFullYear()-18 + "").substr(4 - RegExp.$1.length));
        for (var k in o) if (new RegExp("(" + k + ")").test(format))
            format = format.replace(RegExp.$1,
                RegExp.$1.length == 1 ? o[k] :
                    ("00" + o[k]).substr(("" + o[k]).length));
        return format;
    }
    console.log(new Date().format("yyyy-MM-dd"))
    $("#birthday").attr("max", new Date().format("yyyy-MM-dd"))

    function iniInfoForm() {
        let validator = $("#form1").validate({
            debug: true,
            rules: {
                // user_realname: {
                //     required: true
                // },
                // dq_yw_name: {
                //     required: true
                // }
            },
            messages: {
                // user_realname: {
                //     required: "执法人员不能为空！"
                // },
                // dq_yw_name: {
                //     required: "所属地区不能为空"
                // }
            },
            errorPlacement: function (error, element) {
                error.appendTo(element.parents('td').find(".cError"));
            },
            submitHandler: function (form) {
            }
        });
    }

    let id = $("#id").val();
    $(function () {
        $("#name").focus();
        if (id !== null && id !== '') {
            $.get("/cs/findCompanyStaffByAngs?id=" + id, function (result) {
                console.log(result)
                let sex = result[0].sex;
                $("#name").val(result[0].name);
                $("input[name='sex'][value=" + sex + "]").attr("checked", true);
                $("#birthday").val(result[0].birthday);
                $("#education_val").text(result[0].education);
                $("#phone").val(result[0].phone);
                $("#idcard").val(result[0].idcard);
                $("#image").attr("src", result[0].imgUrl);
                $("#remark").val(result[0].remark);
            })
            $("#image").css({
                'width': 100,
                'height': 200
            });
            $("#uploadFile").hide();
            $("#img_box").hover(function () {
                $("#img_btn").show()
            }, function () {
                $("#img_btn").hide()
            })
        }
    })
    let is_submit = false;
    let url = "";
    if (id !== null && id !== '') {
        url = '/cs/updateCs';
    } else {
        url = '/cs/addCs';
    }

    function addAndUpdateObject() {
        let formData = new FormData();
        let file_obj = document.getElementById('file').files[0];
        if (file_obj === undefined && id !== null && id !== '') {
            let bean = {
                id: id,
                name: $("#name").val(),
                sex: $('input[name="sex"]:checked ').val(),
                birthday: $("#birthday").val(),
                education: $("#education").val(),
                phone: $("#phone").val(),
                idcard: $("#idcard").val(),
                remark: $("#remark").val(),
            }
            let submit = true;
            if (id === null && id === '') {
                for (let beanKey in bean) {
                    let beanElement = bean[beanKey];
                    if ((beanElement === null || beanElement === "") && beanKey !== "id" && beanKey !== "remark") {
                        submit = false;
                        $("#" + beanKey).siblings(".cError").empty().append(`<span style="font-size: 12px;font-weight: bold;color: red">不能为空</span>`);
                        return;
                    }
                }
            }
            if (submit) {
                if (top.ajax.synclBody(url, bean)) {
                    modelWindow.alert(top.CMSLang.Add_success);
                    top.getCurrentFrameObj().loadListble();
                    top.tab_colseOnclick();
                }else {
                    modelWindow.alert(top.CMSLang.Add_fail);
                }

            }
        } else {
            if (file_obj === undefined) {
                alert("请选择")
                return false;
            }
            formData.append("pics", file_obj);
            let imgUrl = '';
            $.ajax({
                url: "/cs/uploadPic",
                type: "post",
                data: formData,
                async: false,
                cache: false,
                dataType: 'json',
                contentType: false,//不设置内容类型
                processData: false, //不处理数据
                success: function (result) {
                    if (result !== null) {
                        imgUrl = result.photo
                        let bean = {
                            id: id,
                            name: $("#name").val(),
                            sex: $('input[name="sex"]:checked ').val(),
                            birthday: $("#birthday").val(),
                            education: $("#education").val(),
                            phone: $("#phone").val(),
                            idcard: $("#idcard").val(),
                            remark: $("#remark").val(),
                            imgUrl: imgUrl
                        }
                        if (id === null || id === ''){
                            let submit = true;
                            for (let beanKey in bean) {
                                let beanElement = bean[beanKey];
                                if ((beanElement === null || beanElement === "") && beanKey !== "id" && beanKey !== "remark") {
                                    submit = false;
                                    $("#" + beanKey).siblings(".cError").empty().append(`<span style="font-size: 12px;font-weight: bold;color: red">不能为空</span>`);
                                    return;
                                }
                            }
                        }

                        if (submit) {
                            if (top.ajax.synclBody(url, bean)) {
                                modelWindow.alert(top.CMSLang.Add_success);
                                top.getCurrentFrameObj().loadListble();
                                top.tab_colseOnclick();
                            }else {
                                modelWindow.alert(top.CMSLang.Add_fail);
                            }
                        }
                    } else {
                        alert("照片上传异常")
                    }
                },
                error: function () {
                    alert("提交失败")
                },
            });
        }
    }

    $("#file").on('change', function () {
        let file = this.files[0];
        if (window.FileReader) {
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onloadend = function (e) {
                $("#image").attr("src", e.target.result).css({
                    'width': 100,
                    'height': 200
                });
            };
            $("#uploadFile").hide();
            $("#img_box").hover(function () {
                $("#img_btn").show()
            }, function () {
                $("#img_btn").hide()
            })
        }
    })
    $("#education").click(function () {
        let $that = $(this);
        let url = '/dictCategory/getDictList/education';
        let children = $($that).children();
        if (children.length <= 1) {
            $("#education_val").hide();
            $.get(url, function (result) {
                result.forEach((item) => {
                    $($that).append(`
                    <option value="` + item.dict_code + `">` + item.dict_name + `</option>
                `)
                })
            })
        }
    })


</script>
</body>

</html>
